<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>

<s:set var="user_info" value="%{#session.USER_INFO}" />
<s:if test="%{#user_info == null}"><jsp:forward page="login.jsp"></jsp:forward></s:if>


<html>
<head>
<title>EPCS Calendar</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/ace.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link href="css/jquery.tagsinput.css" rel="stylesheet"/>
<link href="css/trung-style.css" rel="stylesheet" media="screen">
<link href='css/cupertino/jquery-ui.min.css' rel='stylesheet' />
<link href="css/daterangepicker-bs3.css" rel="stylesheet" type="text/css" media="all"/>

<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/ace.min.js"></script>
<script src='js/jquery-ui.custom.min.js'></script>
<script src="http://localhost:8081/socket.io/socket.io.js"></script>


</head>
<body>

	<div class="index">
		<!--header -->
		<tag:HeaderTag username="${user_info.fullname}">
			<div class="breadcrumbs" id="breadcrumbs" style="margin-bottom: 10px">
				<ul class="breadcrumb" style="margin: 8px;">
					<li><i class="icon-home home-icon"></i><a href="./Index.do">Trang chủ</a></li>
					<li class="active">Sự kiện mới</li>
				</ul>
				<!-- .breadcrumb -->
			</div>
		</tag:HeaderTag>
		<!--end header -->

		<!-- main body -->
		<tag:SideBarTag active_area="3"></tag:SideBarTag>

		<div class="main-content">			
			<div class="page-header"><h1>Sự kiện mới</h1></div>
			
            <div class="row">
                <!-- left column -->
                <div class="col-md-8 boxContent"  id="scrollArea">	
                	<tag:MessageAlertTag></tag:MessageAlertTag>	
                	<jsp:include page="NewEventArea.jsp"></jsp:include>						
              	</div>

                <!-- side right column  Suggestion -------------------------------------------------->
                <div class="col-md-4 boxContent">
					<jsp:include page="RightSideBarArea.jsp"></jsp:include>
<%-- 						<jsp:include page="RightSideBarArea2.jsp"></jsp:include> --%>
                </div>
            </div>
	        		
		</div>	
		<script>
				    // event nhấn nút theo dõi / hủy theo dõi
					function changeFollowing(id,eventId,button){
					 	// ko cho user bấm nữa
					    button.setAttribute("disabled", "disabled");
					    $.ajax({
				            url: "MostFollowingEvent.do",
				            type: "GET",
				            data: { id: id, eventId: eventId },
				            success: function (data) {
				            	button.removeAttribute("disabled");	
				            	if (data != "Unauthorized"){
				            		if(data != "cancelled"){
				            			var arr = data.split(',');
					            		if(arr[0] != "isExisted"){
					            			if (button.value == "Hủy theo dõi")
						            		{
						            		button.value = "Theo dõi";
						            		button.setAttribute("class","btn btn-success btn-xs");
						            		button.setAttribute("onclick","changeFollowing('',"+eventId+",this)");
						            		//alert("class=" + button.getAttribute("class")+ " onclick="+button.getAttribute("onclick"));
							            	}else if (button.value = "Theo dõi"){
							            		
							            		button.value = "Hủy theo dõi";
							            		button.setAttribute("class","btn btn-danger btn-xs");	
							            		button.setAttribute("onclick","changeFollowing('"+data+"',"+eventId+",this)");
							            		//alert("class=" + button.getAttribute("class")+ " onclick="+button.getAttribute("onclick"));	
							            	}
					            		}else{
					            			alert("Bạn đã theo dõi sự kiện này!");
					            			button.value = "Hủy theo dõi";
						            		button.setAttribute("class","btn btn-danger btn-xs");	
						            		button.setAttribute("onclick","changeFollowing('"+arr[1]+"',"+eventId+",this)");
					            		}
				            		}else{
				            			alert("Sự kiện này đã bị đóng");
				            			window.location.href = "Index.do";
				            		}
				            	} else {
				            		window.location.href = "Index.do";
				            	}
				            	
				            	
				            },
				            error: function (data) {
				                alert("fail");
				            }
				        });
					}
					</script>
		
		<script>
		// event scroll paging
	    var processing = true;
	    var pageNumber = 1;
	    $(document).ready(function() {
			$(document).scroll(function(e) {	
			    if (processing) {
					// khi scroll màn hình dc 80% thì xử lý load data (lấy: độ cao doc - độ cao màn hình)
				    var scrollAmount =+ parseInt($(window).scrollTop());
				    var documentHeight = $(document).height();
				
				    // calculate the percentage the user has scrolled down the page
				    var scrollCell = (documentHeight - scrollAmount);
				    if (scrollCell < 800) {
						pageNumber ++;
						processing = true;
						$.ajax({
						    url : "MoreNewEvent.do",
						    type : "Post",
						    data : {
								pageNumber : pageNumber
						    },
						    success : function(html) {
							var data = html.trim();
							if (data != "Unauthorized") {
							    if (data != 'empty'){
									$('#scrollArea').append(data);	
									
							    } else {
									processing = false;
									//alert("Hết hàng");
							    }
							} else {
							    window.location.href = "Index.do";
							}
						    },
						    error : function(data) {
							alert("fail");
						    }
						});
				    }
			    }
			});
	    });
		</script>
	</div>
</body>
</html>